<template>
	<view class="guide-detail">
		<view class="custom-nav-bar">
			<!-- 返回按钮 -->
			<view class="nav-back" @click="goBack">
				<image src="/static/back.png" mode=""></image>
			</view>
		</view>
		<div class="content">
			<div class="title">{{contentObj.title}}</div>
			<rich-text :nodes="contentObj.content"></rich-text>
		</div>
	</view>
</template>

<script>
	import { getArticleDetail, getMessageDetail } from '@/api/mine.js'
	export default {
		data() {
			return {
				contentObj: {}
			}
		},
		onLoad: async function (option) {
			console.log(option, 'option');
			if (option.type === 'guide') {
				this.getArticleDetail(option.id);
			} else  if (option.type === 'message') {
				this.getMessageDetail(option.id);
			} else if (option.type === 'yinsi') {
				this.getArticleDetail(2);
				// this.contentObj = {
				// 	title: '隐私协议',
				// 	content: '这是隐私协议'
				// };
			} else if (option.type === 'xieyi') {
				this.getArticleDetail(1);
				// this.contentObj = {
				// 	title: '用户协议',
				// 	content: this.contentObj
				// };
			}
		},
		methods: {
			async getArticleDetail (id) {
				const res = await getArticleDetail ({id: id});
				if (res.response.statusCode === 200) {
					this.contentObj = res.data.data;
					// console.log(this.contentObj, 'this.contentObj');
				} else {
					this.contentObj = {};
				}
			},
			async getMessageDetail (id) {
				const res = await getMessageDetail ({id: id});
				if (res.response.statusCode === 200) {
					this.contentObj = res.data.data;
					// console.log(this.contentObj, 'this.contentObj');
				} else {
					this.contentObj = {};
				}
			},
			goBack() {
				uni.navigateBack({ delta: 1 });
			}
		}
	}
</script>

<style lang="scss" scoped>
.guide-detail{
	width: 100%;
	height: 100vh;
	background-color: #fff;
}
.custom-nav-bar {
	height: 50px; /* 导航栏高度 */
	display: flex;
	align-items: center;
	color: #000;
	padding: 30px 16px 16px 16px;
}
.nav-back {
	flex: 0 0 auto;
	cursor: pointer;
	image{
		width: 12px;
		height: 24px;
		// padding-left: 16px;
	}
}
.content{
	padding: 24px;
	.title{
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 20px;
		color: #222222;
		padding-bottom: 15px;
		border-bottom: 1px solid #eee;
		margin-bottom: 20px;
	}
}
</style>
